<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
          v-model="listQuery.proxy"
          style="width: 150px"
          class="filter-item"
          filterable
        >
          <el-option key label="所有代理" value />
          <el-option
            v-for="value in dailiArr"
            :key="value"
            :label="value"
            :value="value"
          />
      </el-select>
      <el-select
        v-model="listQuery.status"
        style="width: 150px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option key label="全部状态" :value="''" />
        <el-option key="2" label="已停用" :value="2" />
        <el-option key="1" label="已启用" :value="1" />
      </el-select>
      <el-select v-model="listQuery.is_change_pkg" clearable filterable style="width: 150px" class="filter-item" @change="handleFilter">
        <el-option key label="全部" :value="''" />
        <el-option key="2" label="修改包" :value="1" />
        <el-option key="1" label="未修改包" :value="2" />
      </el-select>
      <el-input
        v-model="listQuery.channel"
        placeholder="请输入cnzz渠道账号进行搜索"
        style="width: 220px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
       plain size="small"
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
       plain size="small"
        v-waves
        class="filter-item"
        style="margin-left: 0;"
        type="primary"
        icon="el-icon-refresh"
        @click="handleCancel"
      >重置</el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column key="1" label="序号" type="index" prop="id" align="center" width="80" />
      <el-table-column key="2" label="渠道账号" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column key="3" label="归属代理" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.agency_username }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column key="4" label="报表最近更新日期" min-width="140" align="center">
        <template slot-scope="{row}">
          <span>{{ row.last_data_tm }}</span>
        </template>
      </el-table-column>-->
      <el-table-column key="5" label="操作" min-width="120" align="center">
        <template slot-scope="{row}">
          <!-- <el-button type="primary" plain size="small" @click="channel_config(row)">渠道配制</el-button> -->
          <el-button v-if="row.status === '1'" type="danger" plain size="small" @click="editUserInfo(row,'2')">停用渠道</el-button>
          <el-button v-if="row.status === '2'" type="primary" plain size="small" @click="editUserInfo(row,'1')">启用渠道</el-button>
          <el-button type="primary" plain size="small" @click="handleLogin(row)">登录</el-button>
          <el-button v-if="row.status === '1'" type="primary" plain size="small" @click="pullSetting(row)">拉起配置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="配制" align="center" min-width="300" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <div v-if="row.config">
            <el-link type="primary">oppo : {{configFormat(row.config, 'a1')}}</el-link>
              <el-link type="success">vivo : {{configFormat(row.config, 'a2')}}</el-link>
              <el-link type="warning">小米 : {{configFormat(row.config, 'a3')}}</el-link>
              <el-link type="danger">华为 : {{configFormat(row.config, 'a4')}}</el-link>
              <el-link>全量 :{{configFormat(row.config, 'a5')}}</el-link>
            <el-link>拉起间隔 : {{configFormat(row.config, 'a6')}}</el-link>
            <el-link>口令 : {{configFormat(row.config, 'a7')}}</el-link><br/>
            <el-link>组合链接 : {{configFormat(row.config, 'a14')}}</el-link>
            <el-link>拉起页面1 : {{configFormat(row.config, 'a8')}}</el-link> <br/>
            <el-link>推广回传概率 : {{configFormat(row.config, 'a9')}}</el-link><br/>
            <el-link type="primary">oppo包 : {{configFormat(row.config, 'a10')}}</el-link>
              <el-link type="success">vivo包 : {{configFormat(row.config, 'a11')}}</el-link>
              <el-link type="warning">小米包 : {{configFormat(row.config, 'a12')}}</el-link>
              <el-link type="danger">华为包 : {{configFormat(row.config, 'a13')}}</el-link>
          </div>
          
        </template>
      </el-table-column>
      <el-table-column label="推广渠道" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ tg_option[row.tg] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="落地页链接" min-width="100" align="center">
        <template slot-scope="{row}">
          <div v-if="langind_list[row.landing_page_id]">{{ langind_list[row.landing_page_id].url +"?channel=" + row.username + "&qd=" +  row.username}}</div>
        </template>

      </el-table-column>
      <el-table-column label="落地页图片" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-image 
            v-if="langind_list[row.landing_page_id]"
            style="width: 50px; height: 100px"
            :src="langind_list[row.landing_page_id].img_url" 
            :preview-src-list="[langind_list[row.landing_page_id].img_url]">
          </el-image>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :pageSizes = [20,30,50,100,200]
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getChannelList"
    />
    <pagination
      v-show="total > 0"
      layout="prev, pager, next"
      :small="true"
      class="pageHidden"
      :total="total"
      :pageSizes = [20,30,50,100,200]
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getChannelList"
    />
    <div class="dialog">
      <el-dialog :title="channel_name + '拉起配制'" :visible.sync="pull_setting_dialog" label-position="top"  width="80%">
        <div v-loading="channel_loading">
            <el-form :model="form">
          <el-form-item label="统计oppo:" :label-width="formLabelWidth">
            <el-switch
              v-model="form.a1"
              active-text="开"
              inactive-text="关">
            </el-switch>
          </el-form-item>

          <el-form-item label="统计vivo:" :label-width="formLabelWidth">
            <el-switch
              v-model="form.a2"
              active-text="开"
              inactive-text="关">
            </el-switch>
          </el-form-item>

           <el-form-item label="统计小米:" :label-width="formLabelWidth">
            <el-switch
              v-model="form.a3"
              active-text="开"
              inactive-text="关">
            </el-switch>
          </el-form-item>

          <el-form-item label="统计华为:" :label-width="formLabelWidth">
            <el-switch
              v-model="form.a4"
              active-text="开"
              inactive-text="关">
            </el-switch>
          </el-form-item>
          <el-form-item label="全量统计(包括pc和ios):" :label-width="formLabelWidth">
            <el-switch
              v-model="form.a5"
              active-text="开"
              inactive-text="关"
              @change="quanliang"
              >
            </el-switch>
          </el-form-item>

          <el-form-item label="拉起间隔(小时):" :label-width="formLabelWidth">
            <el-input type="number" v-model.number="form.a6" autocomplete="off" style="width: 100px"></el-input>
          </el-form-item>

          <el-form-item label="口令:" :label-width="formLabelWidth">
            <el-switch
              v-model="form.a7"
              active-text="开"
              inactive-text="关"
              >
            </el-switch>
          </el-form-item>

          <el-form-item label="组合链接:" :label-width="formLabelWidth">
              <el-input v-model.trim="form.a14"></el-input>
          </el-form-item>

              <el-form-item label="拉起页面1:" :label-width="formLabelWidth">
                <el-input v-model="form.a8"></el-input>
              </el-form-item>

              <el-form-item label="回传率(万分比):" :label-width="formLabelWidth">
                <el-input type="number" v-model.number="form.a9" autocomplete="off" style="width: 100px"></el-input>
              </el-form-item>

              <el-form-item label="oppo包:" :label-width="formLabelWidth">
                <el-select
                  v-model="form.a10"
                  style="width: 100%"
                  class="filter-item"
                  filterable
                >
                  <el-option
                    v-for="item in optionPackageName"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="vivo包:" :label-width="formLabelWidth">
                <el-select
                  v-model="form.a11"
                  style="width: 100%"
                  class="filter-item"
                  filterable
                >
                  <el-option
                    v-for="item in optionPackageName"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="小米包:" :label-width="formLabelWidth">
                <el-select
                  v-model="form.a12"
                  style="width: 100%"
                  class="filter-item"
                  filterable
                >
                  <el-option
                    v-for="item in optionPackageName"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="华为包:" :label-width="formLabelWidth">
                <el-select
                  v-model="form.a13"
                  style="width: 100%"
                  class="filter-item"
                  filterable
                >
                  <el-option
                    v-for="item in optionPackageName"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>

        </el-form>
        </div>
        
        <div slot="footer" style="text-align:left" class="dialog-footer">
          <el-button @click="pull_setting_dialog = false">取 消</el-button>
          <el-button type="primary" @click="subChannelConfig()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  
</template>

<script> 
import { getChannelList, editUserInfo,quickLogin,getChannelConfig,setChannelConfig,getProxyNameList, getLangingPage} from "@/api/admin/admin";
import { setToken, setUser, setType } from "@/utils/auth";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { MessageBox, Message } from "element-ui";
import {pkgs} from '@/utils/index'
export default {
  name: "channel",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      //获取列表时的参数
      listQuery: {
        page:1,
        page_size: 20,
        channel: "",
        status: "",
        is_change_pkg: "",
        proxy: ''
      },
      formLabelWidth: '120px',
      pull_setting_dialog: false,
      form: {
        'a1': false,  // # cnzz统计oppo
        'a2': true,  // # cnzz统计vivo
        'a3': false,  // # cnzz统计小米
        'a4': true,  // # cnzz统计华为
        'a5': false,  // # cnzz全量统计
        'a6': 1,  // # 渠道拉起间隔
        'a7': true,  // # 口令
      },
      channel_name: "",
      channel_loading: false,
      is_fz: false,
      optionPackageName: pkgs,
      pp: {},
      dailiArr: [],
      langind_list : {},
      tg_option: {},
    };
  },
  created() {
    this.getLangingPages()
    // this.getChannelList();
    this.pkgFormat()
    this.getChannelList();
    //获取代理列表
    this.getProxyNameList();
  },
  methods: {
    getLangingPages(){
      getLangingPage({'tg': '1'}).then(res => {
        if (res.STATUS == 200){
          this.langind_list = res.DATA.landing_page;
          this.tg_option = res.DATA.tg
        }
      })
    },
    //获取代理列表
    getProxyNameList() {
      getProxyNameList().then((r) => {
        this.dailiArr = r.DATA;
      });
    },
    pkgFormat(){
      let a = {}
      for (let i = 0; i < pkgs.length; i++){
        if ( pkgs[i].key){
          a[pkgs[i].key] = pkgs[i].label
        } else{
          a[pkgs[i].key] = '无'
        }
        
      }
      this.pp = a
    },
    configFormat(config,key){
      let c = JSON.parse(config)
      switch(key){
        case 'a1':
          return c[key]? "开":"关"
        case 'a2':
          return c[key]? "开":"关"
        case 'a3':
          return c[key]? "开":"关"
        case 'a4':
          return c[key]? "开":"关"
        case 'a5':
          return c[key]? "开":"关"
        case 'a7':
          return c[key]? "开":"关"
        case 'a10':
          return this.pp[c[key]]
        case 'a11':
          return this.pp[c[key]]
        case 'a12':
          return this.pp[c[key]]
        case 'a13':
          return this.pp[c[key]]
        default:
          return c[key]
      }
    },
    //获取渠道列表
    getChannelList() {
      let self = this;
      this.listLoading = true;
      getChannelList(this.listQuery).then((r) => {
        self.list = r.DATA.list;
        self.total = r.DATA.total;
        self.listLoading = false;
      });
    },

//登录
    handleLogin(row) {
      quickLogin({id:row.id}).then((response) => {
        if (response.STATUS === 200) {
           if (response.DATA.user_type == 2) {ydwhgs
            let domin1 = "Admin-Token-daili..com";
            let domin2 = "user-daili.ydwhgs.com";
            let domin3 = "type-daili.ydwhgs.com";
            setToken(response.DATA.token, domin1);
            setUser(response.DATA, domin2);
            setType("daili", domin3);
            window.open("http://daili.ydwhgs.com/", "_blank");
          } else if (response.DATA.user_type == 3) {
            let domin1 = "Admin-Token-qudao.ydwhgs.com";
            let domin2 = "user-qudao.ydwhgs.com";
            let domin3 = "type-qudao.ydwhgs.com";
            setToken(response.DATA.token, domin1);
            setUser(response.DATA, domin2);
            setType("qudao", domin3);

            window.open("http://qudao.ydwhgs.com/", "_blank");
          }
        } else {
          Message({
            message: response.msg || "获取token失败",
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    //修改渠道信息
    editUserInfo(row, status) {
      let self = this;
      MessageBox.confirm(
        "确定将渠道号为 " + row.username + " 的渠道停用吗",
        "确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          editUserInfo({id:row.id},{ status }).then((r) => {
            if (r.STATUS === 200) {
              self.getChannelList();
              Message({
                message: status == "1" ? "开启成功" : "禁用成功",
                type: "success",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getChannelList();
    },
    handleCancel() {
      this.listQuery.page = 1;
      this.listQuery.channel = "";
      this.listQuery.status = 1;
      this.listQuery.is_change_pkg = ""
      this.listQuery.proxy = ''
      this.getChannelList();
    },
    pullSetting(v) {
      this.pull_setting_dialog = true
      this.channel_loading = true
      getChannelConfig({'channel': v.username}).then(res => {
        if (res.STATUS == 200) {
          this.form = JSON.parse(res.DATA.config)
          this.channel_name = v.username
          this.is_fz = res.DATA.is_fuzhou
        } else{
          this.$message.error(res.DEC)
          this.pull_setting_dialog = false
        }
        this.channel_loading = false
      })
    },
    subChannelConfig(){
      setChannelConfig({channel: this.channel_name, config: JSON.stringify(this.form)}).then(res => {
        if (res.STATUS == 200){
          this.$message.success('修改成功')
          this.pull_setting_dialog = false
        }else{
          this.$message.error(res.DEC)
        }
        
      })
    },
    quanliang(v){
      if (v){
        this.form.a1 = true
        this.form.a2 = true
        this.form.a3 = true
        this.form.a4 = true
        this.form.a5 = true
      }
      
    }
  },
};
</script>

<style scoped>
.pageHidden {
  display: none;
}
@media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .pickertime {
    width: 100%;
  }
}
</style>
